<template>
  <Tabs>
    <TabPane label="基本信息">
      <Form ref="resourceInfo" :model="resourceInfo" :label-width="150" :rules="ruleInline" style="height: 700px;">
        <FormItem label="资源名称" prop="title">
          <Input v-model="resourceInfo.title" placeholder="资源名称"></Input>
        </FormItem>
        <FormItem label="路由" prop="path">
          <Input v-model="resourceInfo.path" placeholder="路由"></Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="post('resourceInfo',resourceInfo)">保存</Button>
        </FormItem>
      </Form>
    </TabPane>

    <TabPane label="授权">
      <Form style="height: 700px;">
        <Tag v-for="role in roleInfo" :key="role.id" v-model="role.id" :name="role.id" type="border" closable
             color="primary"
             @on-close="removeRole">{{role.title}}
        </Tag>
        <Select v-model="role_id" style="width:200px;" size="small">
          <Option
            v-for="item in roleList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}
          </Option>
        </Select>
        <Button icon="ios-add" type="dashed" size="small" @click="doAddNewRole">添加角色</Button>

      </Form>
    </TabPane>
  </Tabs>
</template>
<script>
  import {resource, role} from "@/api";
  import {Button, Form, FormItem, Input, InputNumber, Option, Radio, RadioGroup, Select, TabPane, Tabs} from "iview";

  export default {
    components: {
      InputNumber,
      Button,
      Form,
      FormItem,
      Input,
      Tabs,
      TabPane,
      RadioGroup,
      Radio,
      Select,
      Option
    },
    data() {
      return {
        role_id: 0,
        roleInfo: {},
        roleList: [],

        resourceInfo: {
          id: "",
          path: "",
          title: ""
        },
        ruleInline: {
          title: [{required: true, message: "必须填写资源名称", trigger: "blur"}],
          path: [{required: true, message: "必须填写路由", trigger: "blur"}],
        },

      };
    },
    methods: {
      post(type, data) {
        if(type === 'resourceInfo') {
          this.$refs["resourceInfo"].validate(valid => {
            if(valid) {
              if(this.resourceInfo.id) {
                //更新数据
                resource.update(this.resourceInfo.id, this.resourceInfo).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/ucenter/resource/list");
                  }
                });
              } else {
                //新增数据
                resource.create(this.resourceInfo).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/ucenter/resource/list");
                  }
                });
              }
            } else {
              this.$Message.error("请填写必要信息");
            }
          });
        }
      },
      get(id) {
        resource.getInfo(id, {}).then(res => {
          this.resourceInfo = res.data;
          this.roleInfo = res.data.roles;
        });
      },
      removeRole(event, name) {
        console.log(name);
        const role_id = name;
        const resource_id = this.resourceInfo.id;
        resource.deleteRole(role_id, resource_id).then(res => {
          //this.get(this.userInfo.id);
          const index = this.roleInfo.findIndex((resource) => {
            return resource.id === name;
          });
          this.roleInfo.splice(index, 1)
        });
      },
      doAddNewRole() {
        let role_id = this.role_id;
        let resource_id = this.resourceInfo.id;

        if(role_id && resource_id) {
          // let formData = new FormData();
          // formData.append('uid', uid);
          // formData.append('role_id', role_id);

          let formData = {
            role_id: role_id,
            resource_id:resource_id
          };
          resource.addRole(formData).then(res => {
            this.get(this.resourceInfo.id);
          });
        }

      },
      async getRoleList() {
        this.loading = true;
        const map = {page: 0};
        let data = await role.getList(map);
        this.roleList = data.data.map(item => {
          return {
            value: item.id,
            label: `[${item.name}]${item.title}`
          };
        });
        this.roleList.unshift({value: "0", label: "请选择角色"});
        this.loading = false;
      },
    },
    computed: {
      //...mapGetters(["getUser"])
    },
    async mounted() {
      if(this.$route.query.id) {
        this.get(this.$route.query.id);
      }

      await this.getRoleList();
    }
  };
</script>
